<template>
  <div class="grant">
    <div class="heads">
      <div class="fh" @click="$router.go(-1)">
        <span class="iconfont icon-arrow-left-bold"></span> 返回
      </div>
      <div class="center" style="font-size: 19px">充值中心</div>
      <router-link class="shuJ" tag="div" to="/Home"
        ><span class="iconfont icon-shujia"></span> 主页</router-link
      >
    </div>
    <div class="m-hongbao-new">
      <div class="exchange">
        <p>
          <input
            id="J_Series"
            type="text"
            placeholder="请输入红包兑换码或红包口令"
            value=""
          />
        </p>
        <p>
          <a id="J_Active" class="ui-red-dark" href="javascript:;">兑换红包</a>
        </p>
      </div>
    </div>
    <div class="m-ip-tip">
            <em>温馨提示</em>
            <p>充值时送的阅点红包将在充值完成后自动到账，无需兑换码兑换。</p>
        </div>
    <footer>
      <nav class="channel">
        <span>男生</span>
        <span>女生</span>
        <span>出版</span>
        <span>客服</span>
        <span>微信</span>
      </nav>
      <nav>
        <span>客户端</span>
        <span>帮助</span>
        <span clspanss="cur">触屏版</span>
        <span>电脑版</span>
      </nav>
      <div class="m-right"><p>网易公司版权所有©1997-2021</p></div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paly: "zfb",
      palyNum: "1",
    };
  },
};
</script>

<style lang="less">
.grant {
    height: 100%;
    position: relative;
  .heads {
    width: 100%;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    background-color: #333;
    height: 44px;
    line-height: 44px;
    .fh {
      padding-left: 10px;
    }
    .shuJ {
      padding-right: 10px;
    }
  }
  .m-hongbao-new {
    padding: 15px;
    background: #fff;
    height: 510px;
    border-bottom: 1px solid #ededed;
    p {
      margin: 0 0 15px;
      input {
        display: block;
        font-size: 16px;
        width: 100%;
        height: 40px;
        line-height: normal;
        padding: 0 15px;
        background: #f5f5f5;
        border: none;
        border-radius: 3px;
        color: #595550;
        box-sizing: border-box;
      }
    }
    a {
      display: block;
      text-align: center;
      height: 40px;
      line-height: 40px;
      color: #fff;
      background-color: #ed6460;
    }
  }
  .m-ip-tip{
      position: absolute;
    bottom: 60px;
    margin: 30px 15px;
    border: #d3d3d3 solid 1px;
    padding: 15px 10px;
    border-radius: 5px;
    em{
        font-size: 16px;
    color: #595550;
    }
    p{
        margin-top: 5px;
    line-height: 20px;
    color: #807a73;
    }
  }
  footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    color: #999;
    font-size: 12px;
    line-height: 25px;
    padding-top: 10px;
    span {
      margin: 0 15px;
    }
  }
}
</style>